<template>
  <common-list class="data-report-wrap">
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        ref="queryForm"
        :inline="true"
        label-width="65px"
        :model="searchForm"
        @submit.native.prevent
      >
        <el-form-item label="报告名称" prop="datasetName">
          <common-input v-model="searchForm.name" @enter="handleQuery">
          </common-input>
        </el-form-item>
        <common-dept
          ref="commonDept"
          :currentParent="currentParent"
          @getDeptId="getDeptId"
          @getDeptList="getDeptList"
          @getLoading="getLoading"
        ></common-dept>
      </el-form>
    </common-search>
    <div slot="tools">
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="handleAdd"
            v-hasPermi="['system:form:add']"
            >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            :disabled="!showBatch"
            icon="el-icon-delete"
            @click="deleteData()"
            v-hasPermi="['system:form:remove']"
            >批量删除
          </el-button>
        </el-col>
      </el-row>
    </div>
    <common-table
      slot="content"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      :data="list"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="报告名称"
        align="left"
        prop="name"
        fixed
        width="260"
        show-tooltip-when-overflow
      />
      <el-table-column
        label="组织"
        align="left"
        prop="deptName"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        label="描述"
        align="left"
        prop="description"
        show-tooltip-when-overflow
      />
      <el-table-column
        label="操作"
        align="left"
        prop="operation"
        width="160px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handlePreview(scope.row)"
            >详情
          </el-button>
          <el-button
            type="text"
            @click="handleShakeExport(scope.row)"
            :disabled="scope.row.isExportForShake"
            v-hasPermi="['system:form:export']"
            >导出
          </el-button>
          <el-button
            type="text"
            @click="handleEdit(scope.row)"
            v-hasPermi="['system:form:edit']"
            >编辑
          </el-button>
          <el-button
            type="text"
            @click="deleteData(scope.row)"
            v-hasPermi="['system:form:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </common-table>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="searchForm.pageNum"
      :limit.sync="searchForm.pageSize"
      @pagination="getList"
    />

    <report-config
      v-if="isConfigDialog"
      :departmentList="departmentList"
      :reportId="reportId"
      @close="closeConfig"
    ></report-config>
    <report-preview
      v-if="isPreviewDialog"
      :reportId="reportId"
      @close="closePreview"
    ></report-preview>
  </common-list>
</template>

<script>
import BaseList from "@/mixins/BaseList";
import ReportConfig from "./config";
import ReportPreview from "./preview";
import { getReportList, deleteReport } from "@/api/screenConfig/dataReport";
import { getFullDept, getSingleArray } from "@/utils/util";

export default {
  name: "index",
  data() {
    return {
      isConfigDialog: false,
      isPreviewDialog: false,
      loading: false,
      total: 0,
      list: [],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        deptIds: "",
      },
      reportId: null,
      currentParent: 1,
      singleDeptList: [],
      departmentList: [],
    };
  },
  mixins: [BaseList],
  components: {
    ReportConfig,
    ReportPreview,
  },
  methods: {
    getDeptId(val) {
      this.searchForm.deptIds = val;
    },
    getDeptList(list) {
      this.departmentList = list;
      this.singleDeptList = getSingleArray(list);
      this.getList();
    },
    getLoading() {
      this.loading = true;
    },
    getDeptName(val) {
      let dept = this.singleDeptList.find((item) => item.id === val.toString());
      if (dept) return getFullDept(dept.fulllabel);
    },

    // 搜索查询
    handleQuery() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    // 重置按钮
    resetQuery() {
      this.searchForm.name = "";
      this.searchForm.deptIds = "";
      this.$refs.commonDept.clearDept();
    },
    // 报表 配置页面 打开
    handleAdd() {
      this.reportId = null;
      this.isConfigDialog = true;
    },
    getList() {
      this.loading = true;
      getReportList({ ...this.searchForm, classType: 0 })
        .then((res) => {
          if (res.code === 200) {
            this.list = res.rows.reduce((r, c) => {
              r.push({
                ...c,
                deptName: this.getDeptName(c.deptId || ""),
                isExportForShake: false,
              });
              return r;
            }, []);
            this.total = res.total;
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .catch((err) => {
          this.list = [];
          this.total = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handlePreview(row) {
      this.reportId = row.id;
      this.isPreviewDialog = true;
    },
    // 编辑
    handleEdit(row) {
      this.reportId = row.id;
      this.isConfigDialog = true;
    },
    handleExport(row) {
      return new Promise((resolve, reject) => {
        this.download(
          "/system/report/form/export",
          {
            id: row.id,
            type: "xlsx",
            classType: 0, //xlsx xls
          },
          `${row.name || ""}的报告.xlsx`
        ).finally(() => {
          resolve();
        });
      });
    },
    closeConfig() {
      this.isConfigDialog = false;
      this.getList();
    },
    closePreview() {
      this.isPreviewDialog = false;
    },
    deleteData(row) {
      const ids = row?.id || this.ids.join(",");
      this.$GlobalDeleteConfirm()
        .then(() => {
          deleteReport({ ids, classType: 0 }).then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("删除成功");
              if (
                this.searchForm.pageNum > 1 &&
                ids.split(",").length === this.List.length
              ) {
                this.searchForm.pageNum -= 1;
              }
              this.getList();
            } else {
              this.$GlobalErrorConfirm("删除失败", res.msg);
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped lang="scss"></style>
